<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '班级共读计划',
	},
}
</route>

<template>
	<view class="page-bookrack">
		<fly-navbar backgroundColor="#F6F6F6" leftText="班级共读计划" fixed />
		<view class="w-full flex flex-col box-border" :style="{ height: contentHeight + 'rpx' }">
			<view class="w-full px-4 h-[128rpx] box-border flex justify-between items-center">
				<view
					class="text-[36rpx] w-[50%] text-center relative font-bold"
					:style="{ color: tabKey === item.type ? '#34A4E2' : '#303030' }"
					@tap="changeTab(item.type)"
					v-for="item in tabList"
					:key="item.type"
				>
					{{ item.des }}<text class="text-[24rpx] font-bold">({{ item.count }})</text>
					<text
						v-if="tabKey === item.type"
						class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[10rpx]"
						style="background: #34a4e2"
					></text>
				</view>
			</view>
			<view class="w-full flex-1 pb-3 box-border" style="height: calc(100% - 128rpx)">
				<scroll-view
					class="w-full h-full box-border"
					scroll-y
					v-if="thisPage === 1 && classInfo.list.length"
					@scrolltolower="scrolltolower"
				>
					<view
						class="w-full px-4 box-border mb-3 last:mb-0"
						v-for="item in classInfo.list"
						:key="item.id"
						@tap="toDetails(item.id)"
					>
						<view
							class="bg-white rounded-[30rpx] px-3 py-4 w-full box-border flex justify-between flex-col plan-item"
						>
							<view class="w-full">
								<view class="w-full flex justify-between items-center">
									<view class="flex items-center">
										<image
											class="w-[36rpx] h-[36rpx]"
											:src="
												tabKey === 3
													? baseImg + '/class/class-time-gray.png'
													: baseImg + '/class/class-time.png'
											"
										></image>
										<text
											class="text-[22rpx] ml-1"
											:style="{ color: tabKey === 3 ? '#919191' : 'text-[#303030]' }"
											>{{ item.startTime }}-{{ item.endTime }}</text
										>
									</view>
									<text class="text-[24rpx] text-[#34A4E2]" v-if="item.status === 1"
										>共读进行中</text
									>
									<text
										class="text-[24rpx]"
										:style="{ color: item.collect_integral ? 'text-[#34A4E2]' : 'text-[#91919]' }"
										v-if="item.status === 3"
										>{{
											item.collect_integral ? '获得积分' + item.collect_integral : '未参与计划'
										}}</text
									>
								</view>
								<view class="text-[29rpx] text-[#303030] mt-2">{{ item.title }}</view>
							</view>
							<view class="w-full flex justify-between items-center mt-[63rpx]">
								<view class="flex items-center">
									<text class="text-[25rpx] text-[#34A4E2]"
										>{{ item.join_total || 0 }}人已参与</text
									>
									<text class="text-[25rpx] text-[#919191] ml-4"
										>{{ item.no_total || 0 }}人待参与</text
									>
								</view>
								<view class="flex items-center" v-if="item.user_avatar && item.user_avatar.length">
									<image
										v-for="cited in item.user_avatar"
										:key="cited"
										:src="cited.avatar || baseImg + '/user-default.png'"
										class="w-[48rpx] h-[48rpx] rounded-[50%] ml-2 border-1 border-solid first:ml-0 border-[#f1f1f1]"
									></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<no-page
					v-if="thisPage === 0 || (thisPage === 1 && !classInfo.list.length)"
					height="100%"
					:type="type"
					:title="title"
					:btnTitle="btnTitle"
					@click="retry"
				></no-page>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';
import { getPlanClassList } from '@/service/plan';
import { storeToRefs } from 'pinia';
import { toAuthPage } from '@/utils/jump';
import { useUserStore } from '@/store';
import { formatTime } from '@/utils/index';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();
const tabList = ref([
	{
		count: 0,
		des: '进行中',
		type: 1,
	},
	{
		count: 0,
		des: '已结束',
		type: 3,
	},
]);
const tabKey = ref(1); // over
const classInfo = ref({
	list: [],
	start_num: 0,
	close_num: 0,
});
const title = ref('');
const type = ref('btn');
const btnTitle = ref('重试');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

onShow(() => {
	if (!userInfo.value.class_id) {
		// 分享或者进入未登录
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '还没有登录';
		btnTitle.value = '登录';
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	getList();
});

const changeTab = (key: number) => {
	hasMore.value = true;
	classInfo.value = {
		list: [],
		start_num: 0,
		close_num: 0,
	};
	page.value.number = 1;
	tabKey.value = key;
	getList();
};

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getPlanClassList({
			status: tabKey.value,
			page: page.value.number,
			page_size: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			res.data.list.forEach(item => {
				item.startTime = formatTime(item.start_time, '年月日', false);
				item.endTime = formatTime(item.end_time, '年月日', false);
			});
			classInfo.value = {
				list: page.value.number === 1 ? res.data.list : [...classInfo.value.list, ...res.data.list],
				start_num: res.data.start_num,
				close_num: res.data.close_num,
			};
			tabList.value[0].count = res.data.start_num;
			tabList.value[1].count = res.data.close_num;
			if (res.data.list.length < page.value.size) {
				hasMore.value = false;
			}
			if (!classInfo.value.list.length) {
				type.value = 'msg';
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			type.value = 'btn';
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '服务器异常';
	}
};

const toDetails = (id: number) => {
	if (!id) return;
	uni.navigateTo({
		url: `/pages-plan/details/index?id=${id}`,
	});
};

const retry = () => {
	if (!userInfo.value.class_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'redirectTo', url: '/pages/index/index' });
		return;
	}
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}
</style>
